<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>便民服务平台3.0</title>
    <link rel="stylesheet" href="<c:url value='/resource/css/bootstrap.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/darktooltip.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/animate.min.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/style.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/js/app/jquery-validation/1.11.0/jquery.validate.css'/>">
</head>

<body>
<jsp:include page="../include/header.jsp"/>

<script src="<c:url value='/resource/js/lib/template.js'/>"></script>
<script src="<c:url value='/resource/js/lib/jqPaginator.js?v2.1'/>"></script>


<style type="text/css">
    .td_middle {
        vertical-align: middle !important;
    }
</style>


<div class="main-container">
    <div class="mc-hd">
        <p class="app-t">queryCenter</p>
        <h1 class="app-h1">专注高端”互联网+政务”设计</h1>
        <div class="type-wrap">
            <h2 class="typedH2">慧眼看世界，在政务服务的路上不断追求创新！</h2>
        </div>
    </div>
    <div class="mc-bd">

        <div class="container">
            <ol class="breadcrumb">
                <li><a href="<c:url value="/interacts"></c:url>">应用中心</a></li>
                <li class="active">线索举报</li>
            </ol>
            <div class="row">
                <div class="col-sm-12">
                    <div class="mccc-right">
                        <h2>黑龙江省公安厅举报中心（线索举报）互联网举报投诉服务专栏</h2>
                        <form class="mcr-report" id="inputForm" method="post"
                              action="<c:url value="/interacts/postreport"></c:url>">
                            <h3>线索举报</h3>
                            <div class="mcr-report-box">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label><span class="text-red">*</span>线索主题：</label>
                                        <input type="text" class="form-control" id="crtitle" name="crtitle">
                                        <input type="hidden" class="form-control" id="hidAttIds" name="attids">
                                    </div>
                                    <div class="form-group">
                                        <label>联系人：</label>
                                        <input type="text" class="form-control" id="temp1" name="temp1">
                                    </div>
                                    <div class="form-group">
                                        <label><span class="text-red">*</span>接收部门：</label>
                                        <select class="form-control" id="temp3"
                                                name="temp3">
                                            <script id="template_temp3" type="text/html">
                                                <option value="">--请选择--</option>
                                                {{each data as d i}}
                                                <option value="{{d.deptId}}">{{d.deptName}}</option>
                                                {{/each}}
                                            </script>
                                        </select>
                                        <input type="hidden" class="form-control" id="temp4" name="temp4">
                                    </div>
                                    <div class="form-group">
                                        <label>联系电话：</label>
                                        <input type="text" class="form-control" id="temp2"
                                               name="temp2">
                                    </div>
                                    <div class="form-group report-textarea-group">
                                        <label><span class="text-red">*</span>线索内容：</label>
                                        <textarea class="form-control" rows="10" id="crcontent"
                                                  name="crcontent"></textarea>
                                        <p>(您还可以输入<span id="crcontent_count" style="color:red">800</span>个字)</p>
                                    </div>
                                    <div class="form-group">
                                        <div class=" form-group col-xs-12">
                                            <label>图片上传：</label>
                                            <a id="imageUploadBtn" href="javascript:void(0);" class="file_a"
                                               onclick="applyfileupload('fileUploadImg','image','tempReportImageatts','template_report_image_att');">
                                                <i></i><span>点我上传</span>
                                                <input id="fileUploadImg" name="materialImage" type="file"/>
                                            </a>
                                            <span class="text-red" id="imageUploadMessage"></span>
                                            <div id="tempReportImageatts">
                                                <script id="template_report_image_att" type="text/html">
                                                    <div class="attach" id="div_image_{{attid}}">
                                                        <img src="<c:url value="/resource/images/img.jpg"></c:url>">{{sourcename}}
                                                        <a href="javascript:void(0);" class="delete"
                                                           onclick="delAtt('{{attid}}','image')"></a>
                                                    </div>
                                                </script>
                                            </div>
                                        </div>
                                        <div class="form-group col-xs-12">
                                            <label>视频上传：</label>
                                            <a id="videoUploadBtn" href="javascript:void(0);" class="file_a"
                                               onclick="applyfileupload('fileUploadVideo','video','tempReportVideoatts','template_report_video_att');">
                                                <i></i><span id="videoUploadBtnFont">点我上传</span>
                                                <input id="fileUploadVideo" name="materialVideo" type="file"/>
                                            </a>
                                            <span class="text-red" id="videoUploadMessage"></span>
                                            <div id="tempReportVideoatts">
                                                <script id="template_report_video_att" type="text/html">
                                                    <div class="attach" id="div_video_{{attid}}">
                                                        <img src="<c:url value="/resource/images/video-icon.jpg"></c:url>">{{sourcename}}
                                                        <a href="javascript:void(0);" class="delete"
                                                           onclick="delAtt('{{attid}}','video')"></a>
                                                    </div>
                                                </script>
                                                <%--<div class="attach">--%>
                                                <%--<img src="<c:url value="/resource/images/video-icon.jpg"></c:url>">《出生医学证明》.MP4--%>
                                                <%--<a href="#" class="delete"></a>--%>
                                                <%--</div>--%>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="btn-box">
                                <input type="submit" class="btn btn-lg btn-yellow" id="btnSubmit" value="提交信息"/>
                            </div>
                        </form>


                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<div class="modal fade" id="myModal-report">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <div class="mb-text">
                    <i class="glyphicon glyphicon-ok text-green"></i>
                    <%--<i class="glyphicon glyphicon-remove text-red"></i>--%>
                    <h3>提交成功,我们尽快会为你处理,系统将自动跳转至个人中心。</h3>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<jsp:include page="../include/footer.jsp"/>

<script src="<c:url value='/resource/js/app/laydate/laydate.js'/>"></script>
<script type="text/javascript">

    $(function () {

        //绑定警种下拉框
        loadDept("temp3", "template_temp3");
        //loadPolicType("becomplaint2policetype", "template_policetype_2");

        //绑定举报时间下拉框
        //loadCPeriod();

        //注册提交事件
        $('#btnSubmit').click(function () {
            //console.log("btnSubmit");
            //console.log($('#inputForm').valid());
            //return false;
            //遍历附件列表
            $('#hidAttIds').val("");
            var attIds = "";
            $('#tempReportImageatts').find("div").each(function () {

                if (attIds == "") {
                    attIds = $(this).attr("id").replace("div_image_", "");
                }
                else {
                    attIds += "," + $(this).attr("id").replace("div_image_", "");
                }
            });

            $('#tempReportVideoatts').find("div").each(function () {

                if (attIds == "") {
                    attIds = $(this).attr("id").replace("div_video_", "");
                }
                else {
                    attIds += "," + $(this).attr("id").replace("div_video_", "");
                }
            });

            $('#hidAttIds').val(attIds);
            //console.log(attIds);
            console.log($('#inputForm').valid());

            if ($('#inputForm').valid()) {
                $.ajax({
                    url: '<c:url value="/interacts/postreport"></c:url>',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify($('#inputForm').serializeObject()),
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    success: function (data) {
                        //console.log(data);
                        $('#myModal-report').on('hidden.bs.modal', function () {
                            self.location.href = '<c:url value="/usercenter/index"></c:url>';
                        })
                        $('#myModal-report').modal();
                    },
                    error: function (data) {
                        console.log(data.responseText);
                        //alert("提交失败");
                    }
                });
            }
            return false;
        });

    })

    /**
     * 警种下拉框加载
     * @param id
     */
    function loadDept(containerId, templateId) {

        $.ajax({
            type: 'get',
            url: "<c:url value="/depts/sj"></c:url>",
            success: function (resp) {
                //console.log(resp);
                resp = eval(resp);
                var shtml = template(templateId, resp);
                $("#" + containerId).html(shtml);
            },
            error: function (resp) {
                console.log(resp);
            }
        });
    }

    /**
     * 上传附件
     * @param manifestGuid
     */
    function applyfileupload(manifestGuid, fileType, containerId, templateId) {
        console.log("1:" + manifestGuid);

        $("#" + manifestGuid).fileupload({
            url: '<c:url value="/interacts/report/att/"/>' + fileType,
            dataType: 'json',
//            acceptFileTypes: /(\.|\/)(gif|jpe?g|png|bmp)$/i,
//            messages: { acceptFileTypes: '文件类型不符合' },
            add: function (e, data) {

                //console.log(data.files[0]);
                var fileExt = data.files[0].name.split('.').pop();
                var fileSize = data.files[0].size;
                var allowdtypes = "";

                if (fileType == "image") {
                    allowdtypes = 'jpeg,jpg,png,gif,bmp';
                    if (allowdtypes.indexOf(fileExt) < 0) {
                        $('#imageUploadMessage').text("请选择格式为：" + allowdtypes + "的图片");
                        return false;
                    }
                    if (fileSize > 2097152) {
                        $('#imageUploadMessage').text("请选择不超过2M的图片");
                        return false;
                    }

                    $('#imageUploadMessage').text("");
                }
                else {
                    allowdtypes = 'mp4,rmvb,avi';
                    if (allowdtypes.indexOf(fileExt) < 0) {
                        $('#videoUploadMessage').text("请选择格式为：" + allowdtypes + "的视频");
                        return false;
                    }
                    if (fileSize > 20971520) {
                        $('#videoUploadMessage').text("请选择不超过20M的视频");
                        return false;
                    }
                    $('#videoUploadMessage').text("");
                }

                data.submit();

            },
            progressall: function (e, data) {
                console.log($(e.target).attr("id"));
                var progress = parseInt(data.loaded / data.total * 100, 10);
                console.log(progress);

                if($(e.target).attr("id") == "fileUploadImg"){
                    $("#imageUploadBtn").find("span").first().text("上传" + progress + "%");
                    if (progress == 100) {
                        $("#imageUploadBtn").find("span").first().text("加载中...");
                    }
                }
                else{
                    $("#videoUploadBtnFont").text("上传" + progress + "%");
                    if (progress == 100) {
                        $("#videoUploadBtnFont").find("span").first().text("加载中...");
                    }
                }

            },
            done: function (e, d) {
                resp = eval(d.result.data);
                var shtml = template(templateId, resp.data);
                $("#" + containerId).append(shtml);

                $("#imageUploadBtn").find("span").first().text("点我上传");
                $("#videoUploadBtnFont").find("span").first().text("点我上传");

                console.log("imagecount:" + $("div[id*=div_image_]").length);
                console.log("fileType:" + fileType);
                if (fileType == "image") {
                    //图片限制上传3张
                    if ($("div[id*=div_image_]").length >= 3) {
                        $('#imageUploadBtn').addClass("disabled");
                        $('#fileUploadImg').attr("disabled", "disabled");
                    }
                    else {
                        $('#imageUploadBtn').removeClass("disabled");
                        $('#fileUploadImg').removeAttr("disabled");
                    }
                }
                else {
                    //视频限制上传1个
                    if ($("div[id*=div_video_]").length >= 1) {
                        $('#videoUploadBtn').addClass("disabled");
                        $('#fileUploadVideo').attr("disabled", "disabled");
                    }
                    else {
                        $('#videoUploadBtn').removeClass("disabled");
                        $('#fileUploadVideo').removeAttr("disabled");
                    }
                }
            }
        });

        console.log("2:" + manifestGuid);
    }

    function delAtt(attid, filetype) {
        $.ajax({
            type: 'DELETE',
            url: "<c:url value="/interacts/report/att/"/>" + attid,
            success: function (resp) {
                //console.log(resp);
                if (filetype == "image") {
                    $('#div_image_' + resp.data).remove();
                    $('#imageUploadBtn').removeClass("disabled");
                    $('#fileUploadImg').removeAttr("disabled");
                }
                else {
                    $('#div_video_' + resp.data).remove();
                    $('#videoUploadBtn').removeClass("disabled");
                    $('#fileUploadVideo').removeAttr("disabled");
                }
            },
            error: function (resp) {
                console.log(resp);
            }
        });
    }


</script>
<script src="<c:url value='/resource/js/require.js'/>" data-main="<c:url value='/resource/js/main'/>"
        id="current-page" current-page="appCenterReport"></script>
</body>
</html>
